<template>
  <el-container>
    <el-header>
      <div class="banxin">
        <div>
          <!-- <img class="logo" src="@/assets/logo.png" alt="" /> -->
        </div>
        <div>Vue3</div>
      </div>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <!-- 侧边栏 -->
        <el-menu
          router
          :uniqueOpened="true"
          default-active="/"
          class="el-menu-vertical-demo"
          background-color="#101e3c"
          text-color="#fff"
          @select="handleMenu"
        >
          <!-- <template v-for="item in routerList" :key="item.name">
            <el-submenu v-if="item.meta.isShow" :index="item.path">
              <template #title>
                {{ item.meta.title }}
              </template>
              <template v-for="(val, idx) in item.props.default.data" :key="idx">
                <el-menu-item v-if="item.props.default.data.length">{{ val.class }} </el-menu-item>
              </template>
            </el-submenu>
          </template> -->
          <template v-for="item in routerList" :key="item.name">
            <el-menu-item
              :class="item.path === currentRoute ? 'menuActivebgc' : ''"
              v-if="item.meta.isShow"
              :index="item.path"
            >
              {{ item.meta.title }}
            </el-menu-item>
          </template>
        </el-menu>
      </el-aside>
      <el-main>
        <div class="cnode-main">
          <!-- 内容区 -->
          <div class="main-left">
            <router-view></router-view>
          </div>
          <!-- 头像信息区域 -->
          <div class="main-right">
            <PersonData></PersonData>
          </div>
        </div>
      </el-main>
    </el-container>
    <el-footer></el-footer>
  </el-container>
</template>

<script lang="ts">
import PersonData from '@/components/CNode/PersonData.vue'
import { useRouter, useRoute } from 'vue-router'
import { ref, reactive } from 'vue'
export default {
  components: {
    PersonData,
  },
  setup(props) {
    const router = useRouter()
    // watch(
    //   () => routers.path,
    //   () => {
    //     console.log('监听到变化')
    //   }
    // )
    // onBeforeRouteUpdate((to) => {
    //   console.log(to, '=====')
    //   // console.log(th);
    //   let tab = ref(to.path)
    //   let tabs = tab.value.replace('/', '')
    //   Store.state.tab = tabs
    // })
    // const routerOptions = router.options.routes[0].children
    // const routerOptions = router.options.routes
    const routerOptions = router.getRoutes()
    const routerList = reactive(routerOptions)
    const route = useRoute()
    const currentRoute = ref('')
    function handleMenu(val) {
      currentRoute.value = val
    }

    return {
      routerList,
      currentRoute,
      handleMenu,
    }
  },
}
</script>
<style lang="scss" scoped>
.el-header {
  height: 10vh;
  line-height: 5vh;
  min-width: 1200px;
  background: rgb(206, 223, 221) !important;
  .banxin {
    width: 1400px;
    height: auto;
    margin: 0 auto;
    position: relative;
    .logo {
      width: 160px;
      height: 60px;
      position: absolute;
      top: 0;
      left: 50px;
    }
  }
}
.el-aside {
  height: auto;
  min-height: 100%;
}
.el-footer {
  height: 20vh;
  background: #c5c7c9 !important;
}
.el-header,
.el-footer {
  // margin-top: 20px;
  background: #fff;
  color: rgb(27, 25, 25);
  text-align: center;
}

.el-aside {
  background-color: #fff;
  color: #333;
  text-align: center;
  .el-menu-item {
    background: #737979 !important;
    color: #fff !important;
    &:hover {
      background: rgb(67, 74, 80) !important;
    }
  }
  .menuActivebgc {
    background: #545c64 !important;
  }
}

.el-main {
  background-color: #c5c7c9;
  color: #333;
  text-align: left;
  min-width: 1200px;
  min-height: 1080px;
}

body > .el-container {
  margin-bottom: 40px;
}
.cnode-main {
  display: flex;
  justify-content: space-around;
  height: 100%;
  .main-left {
    background: #ffff;
    flex: 3;
  }
  .main-right {
    background: rgb(225, 228, 223);
    flex: 1;
  }
}
</style>
